<template>
  <a-card title="系统公告" :bodyStyle=bodyStyle>
    <a slot="extra" v-if="hasPerm('notice:edit')" @click="setIsEdit(isEdit)">{{isEdit ? '完成' : '编辑'}}</a>
    <div
      v-infinite-scroll="handleInfiniteOnLoad"
      class="demo-infinite-container"
      :infinite-scroll-disabled="busy"
      :infinite-scroll-distance="10"
    >
      <div class="add" @click="$refs.NoticeForm.open()" v-if="isEdit">
        <a-icon type="plus"/>
        新建公告
      </div>
      <a-list :data-source="data" v-if="isEdit">

        <a-list-item slot="renderItem" slot-scope="item, index" class="item">
          <a-icon type="up-square" theme="twoTone" @click="handleSort(item, 'up')"/>
          <a-divider type="vertical"/>
          <a-icon type="down-square" theme="twoTone" @click="handleSort(item, 'down')"/>
          <div class="notice-title" style="margin-left: 24px" @click="$refs.NoticeForm.open(item)">{{item.title}}</div>
          <a-popconfirm
            placement="topRight"
            title="确认删除公告？"
            @confirm="() => deleteObj(item.id)"
          >
            <a-icon type="delete" style="color: red;margin-left: 12px"/>
          </a-popconfirm>
        </a-list-item>
      </a-list>

      <a-list :data-source="data" v-else>
        <a-list-item slot="renderItem" slot-scope="item, index" class="item" @click="setNotice(item)">
          <a-icon type="sound" v-if="(item.read_ids.indexOf(userInfo.id) === -1)" style="color: red;margin-right: 8px"/>
          <span class="notice-title">{{item.title}}</span>
          <span class="date">{{ item.create_datetime }}</span>
        </a-list-item>
      </a-list>
      <NoticeForm ref="NoticeForm" @ok="handleOk"></NoticeForm>
    </div>
    <a-modal v-model="visible" :title="title" :footer="null" :width="520">
      <pre>{{ content }}</pre>
    </a-modal>
  </a-card>
</template>
<script>
  import infiniteScroll from 'vue-infinite-scroll'
  import NoticeForm from '@/views/system/home/NoticeForm'
  import * as api from '@/api/system/noticeManage'
  import { mapGetters } from 'vuex'

  export default {
    components: {
      NoticeForm
    },
    directives: { infiniteScroll },
    data() {
      return {
        bodyStyle: { padding: '0 0 0 10px', Height: '250px' },
        data: [],
        visible: false,
        title: '',
        content: '',
        isEdit: false,
        loading: false,
        busy: false
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    created() {
      this.loadData()
    },
    methods: {
      loadData() {
        api.getList().then((res) => {
          this.data = res.data.rows
          for (let item of res.data.rows) {
            if (item.is_stress && (item.read_ids.indexOf(this.userInfo.id) === -1)) {
              this.setNotice(item)
            }
          }
        })
      },
      setNotice(item) {
        this.visible = true
        this.title = item.title
        this.content = item.content
        if (item.read_ids.indexOf(this.userInfo.id) === -1) {
          api.updatePartObj({ id: item.id, read: true }).then((res) => {
            this.loadData()
          })
        }
      },
      setIsEdit(isEdit) {
        this.loadData()
        this.isEdit = !isEdit
      },
      handleSort(item, sort) {
        api.updatePartObj({ id: item.id, sort: sort }).then((res) => {
          this.loadData()
        })
      },
      deleteObj(id) {
        api.deleteObj(id).then((res) => {
          if (res.success) {
            this.$message.success('删除成功')
            this.loadData()
          } else {
            this.$message.error('删除失败：' + res.message)
          }
        })
      },
      handleOk() {
        this.loadData()
      },
      handleInfiniteOnLoad() {
        const data = this.data
        this.loading = true
        if (data.length > 999) {
          this.$message.warning('已经加载全部~')
          this.busy = true
          this.loading = false
          return
        }
        this.loadData()
        this.loading = false
      }
    }
  }
</script>
<style>
  .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    width: 100%;
    align-items: center;
  }

  .add {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    height: 35px;
    border-radius: 2px;
    border: 1px dashed #d9d9d9;
    font-size: 12px;
    cursor: pointer;
  }

  .add:hover {
    border: 1px dashed #1890ff;
    color: #1890ff;
  }

  .demo-infinite-container {
    overflow: auto;
    padding: 8px 24px;
    height: 300px;
  }

  .notice-title {
    flex: 1;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .date {
    display: inline-block;
    font-size: 12px;
    color: #999;
  }

  .demo-loading-container {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
  }
</style>